<template>
  <div class="salon_diagnose_01">
    <div style="display: block; place-self: flex-start">
      <el-alert
        v-if="reviewedMsg == 1"
        :title="'除了基础信息外, 其他模块都还未做复盘, 请谨慎做评分'"
        type="warning"
        effect="dark"
        :closable="false"></el-alert>
      <div v-if="reviewedMsg == 2" class="diagnose_01_reviewed">
        <span>已经复盘模块：</span>
        <el-tag v-for="item in reviewed" type="success">{{ item.name }}</el-tag>
      </div>
    </div>
    <div class="diagnose_01_table">
      <table border="0" cellpadding="3">
        <colgroup>
          <col span="2" style="border: 2px solid #d2dcf4" />
          <col span="7" style="background-color: none" />
        </colgroup>
        <tr>
          <th colspan="5">复盘总表</th>
          <th>权重前分值/百分制</th>
          <th>权重后分值</th>
          <th>劣势列举</th>
          <th>优势列举</th>
        </tr>
        <tr
          v-for="item in MarkRows"
          :style="{ 'background-color': trBgColor[getDiagnoseCodeByMarkIndex(item['序号'])] }">
          <th v-if="item['序号'] == 1" rowspan="5" style="width: 170px; text-align: center">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 6" rowspan="7">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 13" rowspan="3">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 16">
            <div>
              <span>{{ item['项目'] }}</span>
              <el-popover placement="top-start" title="提示" width="400" trigger="hover">
                <ul class="diagnose_01_pop_ul">
                  <li>1、不要求全，不要求多。</li>
                  <li>2、中小机构强调以责任制为核心的管理，过多制度落不了地，无规矩亦无法成方圆。</li>
                  <li>3、简化SOP，首推院长责任制红线原则，例如：</li>
                  <li><span class="sub_item">① 客不离人</span></li>
                  <li><span class="sub_item">② 《单》随“客”走</span></li>
                  <li><span class="sub_item">③ 客户事务由当值咨询说了算</span></li>
                  <li><span class="sub_item">④ 门店事务由当值店长说了算</span></li>
                </ul>
                <img
                  slot="reference"
                  src="@/assets/images/question_mark.svg"
                  alt="question mark"
                  style="width: 16px; height: 16px; margin: 0 0 0 5px" />
              </el-popover>
            </div>
          </th>
          <th v-if="item['序号'] == 17">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 18" rowspan="2">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 20">{{ item['项目'] }}</th>
          <th v-if="item['序号'] == 1" rowspan="5">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 6" rowspan="7">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 13" rowspan="3">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 16">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 17">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 18" rowspan="2">{{ item['项目权重'] }}</th>
          <th v-if="item['序号'] == 20">{{ item['项目权重'] }}</th>
          <td>{{ item['序号'] }}</td>
          <td>{{ item['细则'] }}</td>
          <td>{{ item['细则权重'] }}</td>
          <td>
            <el-input-number
              v-model="form[`m${item['序号']}`].score"
              :step="1"
              :min="0"
              :max="100"
              disabled
              controls-position="right"
              size="small"
              style="width: 100px"
              @change="calTotalScore"></el-input-number>
          </td>
          <td>
            {{
              (
                (form[`m${item['序号']}`].score * parseFloat(Number.parseInt(item['细则权重'].replace('%', '')))) /
                100
              ).toFixed(2)
            }}
          </td>
          <td>
            <el-input
              v-model="form[`m${item['序号']}`].bad"
              type="textarea"
              maxlength="128"
              show-word-limit
              disabled
              style="width: 180px"></el-input>
          </td>
          <td>
            <el-input
              v-model="form[`m${item['序号']}`].good"
              type="textarea"
              maxlength="128"
              show-word-limit
              disabled
              style="width: 180px"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <el-tag style="margin-left: 20px">总分数: {{ form.score }}</el-tag>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { checkMarkDiagnose, geMarkDiagnoseByNo } from '@/api/diagnose';
// 引入自定义组件
import MarkRows from './diagnose1';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const ReviewOptions = [
  { code: 'diagnose1', name: '综合打分' },
  { code: 'diagnose2', name: '基础信息' },
  { code: 'diagnose3', name: '【基本盘】业绩' },
  { code: 'diagnose4', name: '【基本盘】老客数据' },
  { code: 'diagnose5', name: '【一阶】人力数据' },
  { code: 'diagnose6', name: '【一阶】客户运营' },
  { code: 'diagnose7', name: '【二阶】产品数据' },
  { code: 'diagnose8', name: '【二阶】制度' },
  { code: 'diagnose9', name: '【三阶】成本' },
  { code: 'diagnose10', name: '【三阶】新客数据' },
  { code: 'diagnose11', name: '【三阶】合规性（迎检）' },
];

const EmptyMarkData = {
  id: undefined,
  m1: { score: 0, good: '', bad: '' },
  m2: { score: 0, good: '', bad: '' },
  m3: { score: 0, good: '', bad: '' },
  m4: { score: 0, good: '', bad: '' },
  m5: { score: 0, good: '', bad: '' },
  m6: { score: 0, good: '', bad: '' },
  m7: { score: 0, good: '', bad: '' },
  m8: { score: 0, good: '', bad: '' },
  m9: { score: 0, good: '', bad: '' },
  m10: { score: 0, good: '', bad: '' },
  m11: { score: 0, good: '', bad: '' },
  m12: { score: 0, good: '', bad: '' },
  m13: { score: 0, good: '', bad: '' },
  m14: { score: 0, good: '', bad: '' },
  m15: { score: 0, good: '', bad: '' },
  m16: { score: 0, good: '', bad: '' },
  m17: { score: 0, good: '', bad: '' },
  m18: { score: 0, good: '', bad: '' },
  m19: { score: 0, good: '', bad: '' },
  m20: { score: 0, good: '', bad: '' },
  score: 0, // 最终得分
  coachId: null,
  coachName: null,
};

// 评分表背景颜色, 没有复盘的模块, 背景颜色设置为 #fdf6ec
const DefaultTrBgColor = {
  diagnose5: 'none',
  diagnose6: 'none',
  diagnose7: 'none',
  diagnose8: 'none',
  diagnose9: 'none',
  diagnose10: 'none',
  diagnose11: 'none',
};

export default {
  name: 'Diagnose1',
  data() {
    return {
      MarkRows: MarkRows,
      salon: {},
      form: EmptyMarkData,
      rules: {},
      reviewState: {},
      reviewed: [ReviewOptions[1]], // 已复盘的模块
      reviewedMsg: 0, // 0: none; 1: warn; 2: success
      trBgColor: DefaultTrBgColor,
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
    getDiagnoseCodeByMarkIndex() {
      return val => {
        if (val >= 1 && val <= 5) {
          return 'diagnose5';
        } else if (val >= 6 && val <= 12) {
          return 'diagnose6';
        } else if (val >= 13 && val <= 15) {
          return 'diagnose7';
        } else if (val === 16) {
          return 'diagnose8';
        } else if (val === 17) {
          return 'diagnose9';
        } else if (val >= 18 && val <= 19) {
          return 'diagnose10';
        } else if (val === 20) {
          return 'diagnose11';
        } else {
          return undefined;
        }
      };
    },
  },
  created() {},
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiasnosed();
      this.loadDiagnose1();
    },
    loadDiasnosed: async function () {
      this.reviewedMsg = 0;
      this.reviewed.splice(0, this.reviewed.length);
      this.trBgColor = Object.assign({}, DefaultTrBgColor);
      const errAlertMsg = '查询复盘项目失败';
      await checkMarkDiagnose(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            ReviewOptions.forEach(x => {
              if (ret[x.code] === 1) {
                this.reviewed.push(x);
                this.reviewState[x.code] = 1;
              } else {
                this.reviewState[x.code] = 0;
                this.trBgColor[x.code] = '#fdf6ec';
              }
            });
            this.reviewedMsg = this.reviewed.length > 0 ? 2 : 1;
          } else {
            ReviewOptions.forEach(x => {
              this.reviewState[x.code] = 0;
              this.trBgColor[x.code] = '#fdf6ec';
            });
          }
        })
        .catch(err => {
          console.log('checkMarkDiagnose', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadDiagnose1: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyMarkData);
      const errAlertMsg = '查询综合打分信息失败';
      await geMarkDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form.id = ret.id;
            MarkRows.forEach(x => {
              const field = `m${x['序号']}`;
              if (ret[field]) {
                this.form[field].score = ret[field].score;
                this.form[field].good = ret[field].good;
                this.form[field].bad = ret[field].bad;
              }
            });
          } else {
            // 还未评分, 默认设置满分
            MarkRows.forEach(x => {
              const field = `m${x['序号']}`;
              this.form[field].score = 100;
            });
          }
          this.calTotalScore();
        })
        .catch(err => {
          console.log('geMarkDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    calTotalScore: function () {
      // 分数变化，计算加权总分
      let totalScore = 0;
      MarkRows.forEach(x => {
        const score = this.form[`m${x['序号']}`].score;
        const weight = parseFloat(x['细则权重'].replace('%', ''));
        totalScore += (score * weight) / 100;
      });
      this.form.score = totalScore.toFixed(2);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_01 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  .diagnose_01_reviewed {
    width: 100%;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
  }

  .diagnose_01_table {
    width: 100%;
    display: block;
  }

  .diagnose_01_table table {
    border-collapse: collapse;
  }

  .diagnose_01_table th {
    @extend .salon_model_lable_th;
    text-align: center;
    vertical-align: middle;
  }
  .diagnose_01_table td {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_01_table td .in_td_title {
    margin: 0 5px 0 0;
  }
}

.diagnose_01_pop_ul {
  list-style-type: none;
  padding: 0;
  margin: 0;

  .sub_item {
    padding: 0 0 0 16px;
  }
}

.diagnose_01_pop_ul li {
  margin-bottom: 5px;
}
</style>
